import React from 'react';
import { Layout, Button } from 'antd';
import { inject, observer } from 'mobx-react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { LoadingOutlined } from '@ant-design/icons';
import RouteContent from './routes/index';
import Nav from './components/Nav';
import Flow from './components/flow';
import './App.css';

const ipcRenderer = window.require('electron').ipcRenderer;
const { Header } = Layout;
@inject('store')
@observer
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showCode: true,
      loading: false,
    };
  }
  openCodeWindow() {
    const { showCode } = this.state;
    // if (showCode) {
    //   ipcRenderer.send('window-resize', { width: 1200, height: 800 });
    // } else {
    //   ipcRenderer.send('window-resize', { width: 1600, height: 800 });
    // }
    this.setState({
      showCode: !showCode,
    });
    this.props.store.system.showCode = showCode;
  }
  componentDidMount() {
    this.watchEvent();
  }
  watchEvent() {
    ipcRenderer.on('launch-finish', () => {
      console.log('初始化结束');
      this.setState({ loading: false });
    });
  }
  startApp() {
    const proStore = this.props.store.project;
    const config = proStore.projects[proStore.projectActive];
    ipcRenderer.send('launch-app', JSON.parse(JSON.stringify(config)));
    console.log('初始化开始');
    this.setState({ loading: true });
  }
  render() {
    const { showCode, loading } = this.state;
    return (
      <div className="app-container">
        {loading ? (
          <div className="loading" onClick={() => this.closeLoading()}>
            <LoadingOutlined size="large" />
            <span> 加载中，请稍后</span>
          </div>
        ) : (
          ''
        )}
        <Nav />
        <div className="body-container">
          <Header>
            <Button onClick={this.openCodeWindow.bind(this)}>
              {showCode ? '显示代码' : '查找元素'}
            </Button>
            <Button onClick={this.startApp.bind(this)} style={{ marginLeft: 30 }}>
              启动应用
            </Button>
          </Header>
          <RouteContent />
        </div>
      </div>
    );
  }
}

export default App;
